<template>
  <div class="storeInfo" v-if="this.$store.state.user.userInfo.storeId != 0">
    <el-carousel :interval="4000" type="card" height="300px" indicator-position="none" >
      <el-carousel-item v-for="(i,index) in 13" :key="index" >
        <!-- <h3 class="medium">{{ i }}</h3> -->
        <img :src='item[(i+$store.state.carousel_index)%13]' :alt="index" style="object-fit:cover;" @click="onPreview(i)">
      </el-carousel-item>
      <elImageViewer
          v-if="showViewer"
          :on-close="closeViewer"
          :url-list=viewerImgList
          >
      </elImageViewer>
    </el-carousel>
    <el-card class="box-card" :style="info_style" >
      <img class="img" :src="store.image" alt="店铺头像" @click="showViewer2 = true">
      <elImageViewer
          v-if="showViewer2"
          :on-close="closeViewer"
          :url-list=viewerImgList2
          >
      </elImageViewer>
      <div class="infoMsg">
        <div class="title">{{store.name}}</div>
        <div class="time"><i class="el-icon-time"></i>营业时间： 9:00 - 23:00</div>
        <div class="address"><i class="el-icon-location"></i>{{store.address}}</div>
        <div class="phone"><i class="el-icon-phone"></i>联系电话：15977206702</div>
        <div class="desc"><div style="line-height: 45px; ">简介</div>
          <div class="desc-info">
            {{store.name}}成立于1993年，由台湾天才营销大师张秀琬创立，元祖主要从事烘焙食品的研发、生产与销售，专业生产蛋糕、月饼、中西式糕点等烘焙产品的全国连锁经营企业。元祖股份依托台式烘焙研究所的资源，开展健康营养知识教育，向儿童普及食品健康营养和中华民俗文化知识，颇受学校和家长的好评。如今元祖已经成为国内烘焙市场著名品牌。
          </div>
        </div>

      </div>
      <div class="button">  
        <el-tooltip  effect="dark" content="编辑商店信息" placement="bottom">
          <el-button  icon="el-icon-edit" circle @click="updateStoreInfo()"></el-button>
        </el-tooltip>

        <el-dialog style="border-radius: 15px;" title="商店信息" :visible.sync="dialogFormVisible">
          <el-form :model="store2">
            <el-form-item label="商店头像" :label-width="formLabelWidth">
              <uploadImage :imageUrl="store2.image" @imageUrl2="imageUrl2" />
            </el-form-item>
            <el-form-item label="店名" :label-width="formLabelWidth">
              <el-input v-model="store2.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input v-model="store2.address" autocomplete="off"></el-input>
            </el-form-item>
 
          </el-form >
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>

  <Empty v-else :is-search="isSearch" />
</template>

<script>
import Empty from '@/components/Empty/index.vue'
import {queryById,updateStore} from '@/api/store';
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
import uploadImage from '@/components/upload/uploadImage.vue'
export default {
  components:{
    elImageViewer,
    uploadImage,
    Empty
  },
  data() {
    return {
      isSearch:false,
      store:null,
      store2:null,
      dialogFormVisible:false,
      screenWidth: document.body.clientWidth, //获取屏幕宽度
      screenWebWidth:document.documentElement.clientWidth, //获取页面宽度
      screenHeight: document.body.clientHeight, //获取屏幕高度
      screenWebHeight:document.documentElement.clientHeight, //获取页面高度
      info_left_width:0,
      info_left_height:0,
      info_style:'',
      item:[require('@/assets/carousel/carousel-1.jpg'),require('@/assets/carousel/carousel-2.jpg'),require('@/assets/carousel/carousel-3.jpg'),require('@/assets/carousel/carousel-4.jpg'),require('@/assets/carousel/carousel-5.jpg'),require('@/assets/carousel/carousel-6.jpg'),require('@/assets/carousel/carousel-7.jpg'),require('@/assets/carousel/carousel-8.jpg'),require('@/assets/carousel/carousel-9.jpg'),require('@/assets/carousel/carousel-10.jpg'),require('@/assets/carousel/carousel-11.jpg'),require('@/assets/carousel/carousel-12.jpg'),require('@/assets/carousel/carousel-13.jpg')],
      viewerImgList:[],
      viewerImgList2:[],
      showViewer:false,
      showViewer2:false,
      test:''
    }
  },
  created(){
    const that = this
    const res = queryById(that.$store.state.user.userInfo.storeId)
    res.then((res)=>{
      that.store = res.data
      that.store2 = JSON.parse(JSON.stringify(that.store))
      that.viewerImgList2.push(that.store.image)
      console.log(this.store)
    }).catch((err)=>{
      console.log(err)
    })
    //info位置
    this.info_left_width = document.documentElement.clientWidth*0.0316
    this.info_left_height = document.documentElement.clientHeight/9
    this.info_style = 'left:' + this.info_left_width +'px;'
  },
  methods:{
        //打开查看器
        onPreview(index) {
          this.showViewer = true
          let tempImgList = [...this.item];
          let temp = [];
          // console.log(i)
          index = (index + this.$store.state.carousel_index)%13
          for (let i = 0; i < index; i++) {
            temp.push(tempImgList.shift());
          }
          this.viewerImgList = tempImgList.concat(temp);
        },
        // 关闭查看器
        closeViewer() {
          this.showViewer = false
          this.showViewer2 = false
        },
        updateStoreInfo(){
          this.dialogFormVisible = true
        },
        cancel(){
          this.store2 = JSON.parse(JSON.stringify(this.store))
          this.dialogFormVisible = false
          
        },
        submit(){
          const that = this
          const res = updateStore(this.store2)
          res.then((res)=>{
            console.log(res)
            that.$message({
              message: '修改成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.store = JSON.parse(JSON.stringify(this.store2))
          }).catch((err)=>{
            that.$message.error(err);
            console.log(err)
          })
          this.dialogFormVisible = false
        },
        imageUrl2(imageUrl2){
          console.log('imageUrl2:'+imageUrl2)
          this.store2.image = imageUrl2
        }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 92%;
    position: absolute;
    top: 250px;
    z-index: 2;
    line-height: 25px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .storeInfo{
    position: relative;
  }

  .img{
    width: 210px;
    height: 210px;
    object-fit: cover;
    border-radius: 5px;
    border-style: solid;
    border-color: #475669;
  }
  
  .infoMsg{
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    /* border-style: solid;
    border-color: #475669; */
    line-height: 25px;
    margin-top: 5px;
}

.title{
  font-size: 30px;
  font-weight:bolder;
  line-height: 50px;
}
.time,.phone{
  font-size: 15px;
  font-weight: normal;
  color: #574a4a;
}
.address{
  font-size: 16px;
  font-weight:400;
  color:rgb(82, 77, 77);
  line-height: 35px;
}
.desc{
  margin-top: 6px auto;

  
}
.desc-info{
  margin-top: 6px auto;
  /* width: 80%; */
  padding: 3px 50px;

}
.button{
  position: absolute;
  top: 50px;
  right: 50px;
}
</style>